<template>
    <div>
        <el-button v-permission="permission.edit" :loading="crud.status.cu === 2" :disabled="disabledEdit"
                   size="mini"
                   type="primary" icon="el-icon-edit" @click="crud.toEdit(data)"
        />
        <el-popover v-model="pop" v-permission="permission.del" placement="top"
                    width="180" trigger="manual"
                    @show="onPopoverShow" @hide="onPopoverHide"
        >
            <p>{{ msg }}</p>
            <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="doCancel">取消</el-button>
                <el-button :loading="crud.dataStatus[crud.getDataId(data)].delete === 2" type="primary" size="mini"
                           @click="crud.doDelete(data)"
                >确定
                </el-button>
            </div>
            <el-button slot="reference" :disabled="disabledDle" type="danger"
                       icon="el-icon-delete" size="mini"
                       @click="toDelete"
            />
        </el-popover>
    </div>
</template>
<script>
import CRUD, {crud} from '@crud/crud';

export default {
    mixins: [crud()],
    props: {
        data: {
            type: Object,
            required: true
        },
        permission: {
            type: Object,
            required: true
        },
        disabledEdit: {
            type: Boolean,
            default: false
        },
        disabledDle: {
            type: Boolean,
            default: false
        },
        msg: {
            type: String,
            default: '确定删除本条数据吗？'
        }
    },
    data() {
        return {
            pop: false
        };
    },
    methods: {
        doCancel() {
            this.pop = false;
            this.crud.cancelDelete(this.data);
        },
        toDelete() {
            this.pop = true;
        },
        [CRUD.HOOK.afterDelete](crud, data) {
            if (data === this.data) {
                this.pop = false;
            }
        },
        onPopoverShow() {
            setTimeout(() => {
                document.addEventListener('click', this.handleDocumentClick);
            }, 0);
        },
        onPopoverHide() {
            document.removeEventListener('click', this.handleDocumentClick);
        },
        handleDocumentClick(event) {
            this.pop = false;
        }
    }
};
</script>
